<template>
    <view class="w-[100%] py-[20rpx] relative mb-[20rpx]">
        <image src="@/static/images/icon/card.png" class="w-[100%] top-0 absolute right-0 h-[100%]" />
        <view class="right_top ">
           <image class="w-[100rpx] h-[34rpx] mt-[12rpx]" src="@/static/images/icon/bkc.png"></image>
        </view>
        <view class="w-[360rpx] topBtn px-[32rpx] py-[12rpx] ml-[-12rpx] relative"
            style="border-radius: 12rpx 12rpx 12rpx 0rpx;background: linear-gradient( 180deg, #000000 0%, #585858 100%);">
            <image src="@/static/images/icon/car.png"
                class="w-[210rpx] z-[1] absolute top-[26rpx] right-[10rpx] h-[47rpx]" />
            <view class="text-[28rpx] text-[#fff] mb-[2rpx] font-[500]">
                先生/女士
            </view>
            <view class="text-[28rpx] text-[#fff] flex items-center mb-[2rpx] font-[500]">
                <image src="@/static/images/icon/map2.png" class="w-[24rpx] h-[32rpx]" />
                <view class="text-[22rpx] ml-[6rpx] font-[400] text-[#ccc]">湖北省武汉市洪山区</view>
            </view>
        </view>
        <view class="relative w-[100%] px-[24rpx]  mt-[30rpx]">
            <view class="text-[rgb(0,0,0)] relative text-[28rpx] font-[500]">
                宝马5系 A06
            </view>
            <view class="text-[rgb(0,0,0)] flex items-center text-[24rpx] font-[500] mt-[24rpx]">
                <text class="text-[#666]">基础信息：</text>
                <text class="flex-1">2012-11-1 本地牌照·15万公里·上海-浦东</text>
            </view>
            <view class="text-[rgb(0,0,0)] flex items-center justify-between text-[24rpx] font-[500] mt-[24rpx]">
                <view class="text-[#666] flex-1">车辆颜色：<text class="text-[rgb(0,0,0)]">黑色</text></view>
                <view class="text-[#666] flex-1">上门时间：<text class="text-[rgb(0,0,0)]">工作日上午</text></view>
            </view>
            <view class="text-[rgb(0,0,0)] flex items-center justify-between text-[24rpx] font-[500] mt-[24rpx]">
                <view class="text-[#666] flex-1">车况如何：<text class="text-[rgb(0,0,0)]">轻微剐蹭</text></view>
                <view class="text-[#666] flex-1">是否上门：<text class="text-[rgb(0,0,0)]">提前预约</text></view>
            </view>
            <view class="text-[rgb(0,0,0)] flex items-center text-[24rpx] font-[500] mt-[24rpx]">
                <text class="text-[#666]">详情备注：</text>
                <text class="flex-1">这是一个备注信息</text>
            </view>
            <view class="w-[100%] mt-[24rpx] flex justify-center">
                <view class="btn flex justify-center items-center">
                    <image src="@/static/images/icon/ic_kickboxing.png" class="w-[28rpx] h-[52rpx]" />
                    <text class="ml-[22rpx] gradient-text">同城比武群殴 出发擂台</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup></script>
<style lang="scss" scoped>
.btn {
    width: 500rpx;
    height: 96rpx;
    background: linear-gradient(98deg, #000000 0%, #454545 100%);
    border-radius: 16rpx;
}

.gradient-text {
    background: linear-gradient(180deg, #FFE788 0%, #FFF6D7 100%);
    -webkit-background-clip: text;
    font-weight: 600;
    font-size: 32rpx;
    -webkit-text-fill-color: transparent;
    /* 兼容旧版浏览器 */
    background-clip: text;
    /* 标准语法 */
    color: transparent;
    /* 标准语法 */
}

.topBtn::after {
    content: '';
    position: absolute;
    width: 12rpx;
    height: 20rpx;
    background: linear-gradient(45deg, #f7f7f7, #f7f7f7 50%, #000000 50%, #000000 100%);
    bottom: -18rpx;
    left: 0;
}

.right_top {
    width: 264rpx;
    height: 104rpx;
    background: linear-gradient(98deg, #FFF8DD 0%, #FFD856 100%);
    border-radius: 16rpx 36rpx 16rpx 16rpx;
    position: absolute;
    top: 10rpx;
    right: 6rpx;
    padding: 4rpx 40rpx;
    font-size: 36rpx;
    font-family: YouSheBiaoTiHei;
    color: #000000;
    font-weight: 700;
    text-align: end;
    z-index: -1;
}
</style>